<template>
	<div class="mainsu">
		<div class="main_spac1">
			<div class="main_white padding10 paddingBottom20">
				<div class="mainor_form">
					<div class="mainor_te">
						<el-button type="primary" @click="exportform">导出</el-button>
					</div>
					<el-form
						:inline="true"
						:model="form"
						class="demo-form-inline"
						ref="userListFrom"
						label-width="70px"
					>
						<el-form-item label="日期" prop="establishTime">
							<el-date-picker
								v-model="establishTime"
								type="daterange"
								class="time220"
								:editable="false"
								unlink-panels
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								value-format="yyyy-MM-dd"
								:clearable="false"
								:picker-options="pickerOptions"
								@change="dateChange"
							/>
						</el-form-item>
						<el-form-item label="商品名称" prop="goods_spu_id">
							<change-goods-input
								ref="changeGoodsInput"
								@clear="
									() => {
										this.form.goods_spu_id = '';
									}
								"
								@sendValue="
									(data) => {
										this.form.goods_spu_id = data.id;
									}
								"
							></change-goods-input>
						</el-form-item>
						<el-form-item label="商品分类" prop="category_id" class="wid220">
							<el-cascader
								v-model="form.category_id"
								:options="options"
								:props="defaultProps"
								ref="cascaderHandle"
							></el-cascader>
						</el-form-item>
						<el-form-item>
							<el-button
								class="reset marginLeft10"
								type="primary"
								@click="reset"
								>重置</el-button
							>
							<el-button
								type="primary"
								@click="getArticleList"
								:loading="listLoading"
								>搜索</el-button
							>
						</el-form-item>
					</el-form>
				</div>
				<div class="main_table marginTop10" style="min-height: 550px">
					<el-table
						ref="multipleTable"
						v-loading="listLoading"
						:data="list"
						element-loading-text="加载中"
						fit
						border
						highlight-current-row
						:header-cell-class-name="this.$verticaline"
					>
						<el-table-column label="商品名称" prop="goods_name" min-width="110">
							<template slot-scope="scope">{{ scope.row.goods_name }}</template>
						</el-table-column>

						<el-table-column label="商品分类" prop="category" min-width="110" />
						<el-table-column
							label="SKU编码"
							prop="goods_spu_code"
							min-width="110"
						/>
						<el-table-column label="单位" prop="unit" min-width="110" />

						<el-table-column
							label="盘点报损数量"
							prop="inventory_num"
							min-width="110"
						>
						</el-table-column>
						<el-table-column
							label="调整报溢数量"
							prop="adjust_num"
							min-width="110"
						>
						</el-table-column>
						<el-table-column
							label="盘点报损金额"
							min-width="110"
							prop="inventory_money"
						>
							<template slot-scope="scope">
								{{ scope.row.inventory_money | twoPlace }}
							</template>
						</el-table-column>
						<el-table-column
							label="调整报溢金额"
							prop="adjust_money"
							min-width="110"
						>
							<template slot-scope="scope">
								{{ scope.row.adjust_money | twoPlace }}
							</template>
						</el-table-column>
						<el-table-column
							label="损耗金额"
							prop="ullage_money"
							min-width="130"
						>
							<template slot="header">
								<headerSortArrow
									label="ullage_money"
									ref="arrow1"
									@handleSort="handleSort($event, 'arrow1')"
									>配送日期
									<el-tooltip
										class="item"
										effect="dark"
										content="注释：损耗金额=盘点报损金额-调整报溢金额"
										placement="top-start"
									>
										<i
											class="el-icon-question table-msg"
											style="margin-left: 5px; margin-top: -1px"
										></i>
									</el-tooltip>
								</headerSortArrow>
							</template>
							<template slot-scope="scope">
								{{ scope.row.ullage_money | twoPlace }}
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div class="main_page boxdq">
					<div></div>
					<!-- 分页 -->
					<div class="main_page_r">
						<el-pagination
							:current-page="current.page"
							:page-sizes="[20, 30, 50, 100]"
							:page-size="limit"
							layout="total, sizes, prev, pager, next, jumper"
							:total="totalCount"
							background
							@size-change="changeLimit"
							@current-change="changePage"
						/>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		get_ullageInventory,
		export_exportullageinventory,
	} from "@/api/report/index";
	import { apiUrl, objKeySort, Md5 } from "@/utils/public";
	import { report_shortcuts } from "@/options/new_dateOption";
	import { parseTime, exportMethod, getNowMonth } from "@/utils/index";
	import { recursion, category } from "@/utils/index";
	import headerSortArrow from "@/views/report/components/headerSortArrow";

	export default {
		components: { headerSortArrow },
		data() {
			return {
				pickerOptions: report_shortcuts,
				exportMethod,
				getNowMonth,
				// 时间
				parseTime,
				// 分页
				current: {
					page: 1,
					per_page: 20,
				},
				limit: 20,
				totalCount: 1,
				// 列表数据
				list: [],

				listLoading: false,
				// 搜索
				form: {
					type: "2",
					start_time: "",
					end_time: "",
					pid: "",
					category_id: "",
					goods_spu_id: "",
					order_by: "",
					order_type: "", //1升序  2降序
				},
				establishTime: [],
				// 分类
				options: [],
				defaultProps: {
					children: "selfNext",
					label: "title",
					value: "id",
					checkStrictly: true,
				},
			};
		},
		created() {
			// 列表
			this.establishTime = this.getNowMonth();
			this.get_ullageInventory();
		},
		methods: {
			get_ullageInventory() {
				this.listLoading = true;
				let data = Object.assign(
					{
						sign: Md5(
							objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
						),
					},
					apiUrl().name,
					this.list_form(),
					this.current
				);
				get_ullageInventory(data).then((res) => {
					this.listLoading = false;
					if (res.errcode == 0) {
						this.list = res.data.list;
						this.totalCount = res.data.count;
						this.options = recursion(res.data.categoryList, true);
					}
				});
			},

			// 重置
			reset() {
				this.$refs["userListFrom"].resetFields();
				this.$refs["changeGoodsInput"].name = "";
				this.establishTime = this.getNowMonth();
				this.getArticleList();
			},
			// 搜索
			getArticleList() {
				this.current.page = 1;
				this.get_ullageInventory();
			},
			// 分页
			changeLimit(pageSize) {
				this.current.per_page = pageSize;
				this.get_ullageInventory();
			},
			changePage(page) {
				this.current.page = page;
				this.get_ullageInventory();
			},

			list_form() {
				let form = JSON.parse(JSON.stringify(this.form));
				form.start_time = this.establishTime[0] ? this.establishTime[0] : "";
				form.end_time = this.establishTime[1] ? this.establishTime[1] : "";
				form.pid = form.category_id[0] ? form.category_id[0] : "";
				form.category_id = category(form.category_id);
				return form;
			},
			// 排序
			handleSort(data, ref) {
				let arr = ["arrow1"].filter((e) => e != ref);
				arr.map((e) => {
					this.$refs[e].selected = false;
				});
				this.form.order_by = data.label;
				this.form.order_type = data.type;
				this.get_ullageInventory();
			},
			// 导出
			exportform() {
				let data = Object.assign(
					{
						sign: Md5(
							objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
						),
					},
					apiUrl().name,
					this.list_form(),
					this.current
				);
				export_exportullageinventory(data).then((res) => {
					this.exportMethod(res, "盘点损耗");
				});
			},
			// 采购价 ？注释
			renderHeader_purchase(h, { column, $index }) {
				// 这里在最外层插入一个div标签
				return h("span", [
					h("span", {
						// 表示内容
						domProps: {
							innerHTML: column.label,
						},
						on: {
							click: () => {},
						},
					}),
					h(
						"el-tooltip",
						{
							// 表示属性
							attrs: {
								effect: "dark",
								content: "注释：损耗金额=盘点报损金额-调整报溢金额",
								placement: "top",
							},
						},
						[
							h("i", {
								style: "margin-left: 5px;margin-top:-1px;",
								class: "el-icon-question table-msg",
							}),
						]
					),
				]);
			},
			// 日期选择
			dateChange(val) {
				let start = new Date(val[0]).getTime();
				let end = new Date(val[1]).getTime();
				let diff = start - end;
				if (Math.abs(diff) > 3600 * 1000 * 24 * 60) {
					this.$message.warning("选择时间跨度不能超过两个月");

					this.establishTime = this.getNowMonth();
				}
				this.get_ullageInventory();
			},
		},
	};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.mainsu {
	.mainor_form form {
		width: calc(100% - 180px);
	}
}

// 支付状态
.success {
	color: $green;
}
.unpaid {
	color: $colour_red;
}
// 订单状态
.order0 {
	color: $order_color1;
}
.order1 {
	color: $order_color2;
}
.order2 {
	color: $order_color3;
}
.order4 {
	color: $order_color4;
}
</style>
